<template>
  <div>
    <div class="panel-border">
      <SearchForm
        ref="mychild"
        size="mini"
        :search-data="searchData"
        :search-form="searchForm"
        :search-handle="searchHandle"
      />

    </div>
    <div class="panel-border">
      <avue-crud
        ref="crud"
        :option="option"
        :data="optionData"
        :page.sync="page"
        :table-loading="loading"
        @on-load="initData"
        @refresh-change="refreshChange"
      >
        <template slot="menuLeft" slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-plus"
            size="small"
            plain
            @click.stop="handleAdd()"
          >{{ add }}</el-button>
        </template>
        <template slot="statusCd" slot-scope="scope">
          <span
            v-for="item in statusCd"
            v-if="item.item_code == scope.row.statusCd"
            :label="item.item_code"
          >{{ item.item_text }}</span>
        </template>
        <template slot="rosterCount" slot-scope="scope">
          <p v-if="scope.row.createStaffFlag=='true'? true : false" style="color: #3a8ee6;" @click="showListByImport(scope.row.specialListId,scope.row.specialListName)">{{ scope.row.rosterCount }}</p>
          <p v-if="scope.row.createStaffFlag=='false'? true : false">{{ scope.row.rosterCount }}</p>
        </template>
        <template slot="option" slot-scope="scope">
          <!--<el-button size="mini" type="text"-->
          <!--v-text="$t('edit')" @click="onEdit=$t('scope.row.specialListId')"-->
          <!--&gt;</el-button>-->
          <!--<el-button size="mini" type="text"-->
          <!--v-text="$t('delete')" @click="onDelete=$t('scope.row.specialListId')"-->
          <!--&gt;</el-button>-->
          <el-button
            size="mini"
            type="text"
            @click="dialogTitle=$t('rosterList.detail');specialListId=scope.row.specialListId;modelType='detail';showDetailModel=true"
            v-text="$t('rosterList.detail')"
          />
          <el-button
            size="mini"
            type="text"
            :disabled="scope.row.createStaffFlag=='true'? false : true"
            @click="showListByImport(scope.row.specialListId,scope.row.specialListName)"
            v-text="$t('rosterList.import')"
          />
          <el-button
            size="mini"
            type="text"
            :disabled="scope.row.statusCd == 1200 && scope.row.createStaffFlag=='true'? false : true"
            @click.stop="editStatus(scope.row.specialListId , 1000)"
            v-text="$t('rosterList.enable')"
          />
          <el-button
            size="mini"
            type="text"
            :disabled="scope.row.statusCd == 1000 && scope.row.createStaffFlag=='true'? false : true"
            @click.stop="editStatus(scope.row.specialListId , 1200)"
            v-text="$t('rosterList.shutdown')"
          />
        </template>
        <template slot="empty">
          <avue-empty
            image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
            :desc="$t('empty')"
          >
            <br>
          </avue-empty>
        </template>
      </avue-crud>
    </div>
    <!--名单详情 -->
    <el-dialog
      :visible.sync="showDetailModel"
      :title="$t('rosterList.detail')"
      :close-on-click-modal="false"
      :append-to-body="true"
      class="el-dialog-detail"
    >
      <RosterDetail
        :key="new Date().getTime()"
        :model-type="modelType"
        :special-list-id="specialListId"
        :roster-status-cd="rosterStatusCds"
        @onDetailSuccess="onDetailSuccess"
      />
    </el-dialog>
    <!--名单详情列表新增 -->
    <el-dialog
      :visible.sync="showDetailListModel"
      :title="$t('rosterList.listDetail')"
      :close-on-click-modal="false"
      :show-close="false"
      :append-to-body="true"
      class="el-dialog-detail"
      :fullscreen="true"
    >
      <MktSpecialListDetailList
        :key="new Date().getTime()"
        :model-types="modelType"
        :roster-status-cd="rosterStatusCds"
        :roster-name-one="specialListName"
        :param-special-list-id="specialListId"
        @onAddSuccess="onAddSuccess"
      />
    </el-dialog>
    <!--点击名单数量查看-->
    <el-dialog
      :visible.sync="showDetailListByNumberModel"
      :title="$t('rosterList.listDetail')"
      :close-on-click-modal="false"
      :show-close="false"
      :append-to-body="true"
      class="el-dialog-detail"
      :fullscreen="true"
    >
      <MktSpecialListDetailListByNumber :key="new Date().getTime()" :param-id="specialListId" :param-special-list-name="specialListName" @onNumberSuccess="onNumberSuccess" />
    </el-dialog>

  </div>
</template>

<script>
import { selectComTagDataList } from '@/utils/util'
import RosterDetail from './rosterDetail'
import SearchForm from './searchForm'
import MktSpecialListDetailList from './mktSpecialListDetailList'
import MktSpecialListDetailListByNumber from './mktSpecialListDetailListByNumber'
export default {
  name: 'Roster',
  components: {
    RosterDetail,
    SearchForm,
    MktSpecialListDetailList,
    MktSpecialListDetailListByNumber
  },
  data() {
    return {
      loading: true,
      labelStatusCd: [],
      rosterStatusCds: [],
      statusCd: [],
      // 查询表单
      searchData: {
        statusCd: '',
        specialListName: ''
      },
      searchForm: [
        { type: 'Radio', label: '名单状态:', search: 'rosterList.statusCd', prop: 'statusCd', datas: [], handle: () => this.onSearch() }
      ],
      searchHandle: [
        { label: '名单名称:', type: 'Input', prop: 'specialListName', search: 'rosterList.specialListName', placeholder: '请输入名单名称模糊匹配', placeholderFiled: 'rosterList.searchPlaceholder' },
        { label: '查询', search: 'query', type: 'primary', handle: () => this.onSearch() },
        { label: '重置', search: 'reset', type: 'primary', handle: () => this.onReset() }
      ],
      specialListId: 0,
      modelType: 'add',
      add: this.$t('rosterList.add'),
      specialListName: '',
      showDetailModel: false,
      showDetailListModel: false,
      showDetailListByNumberModel: false,
      showAddModel: false,
      highLight: true,
      labelTree: [],
      optionData: [
      ],
      option: {
        index: true,
        indexLabel: this.$t('serialNumber'),
        indexWidth: '120',
        border: true,
        page: false,
        menu: false,
        align: 'center',
        menuAlign: 'center',
        stripe: true,
        column: [
          // {
          // 	label: '序号',
          // 	prop: 'labelId',
          // },
          {
            label: '名单名称',
            prop: 'specialListName',
            overHidden: true,
            minWidth: 50

          }, {
            label: '名单状态',
            prop: 'statusCd',
            slot: true,
            overHidden: true,
            minWidth: 50
          }, {
            label: '名单数量',
            prop: 'rosterCount',
            slot: true,
            overHidden: true,
            minWidth: 50
          }, {
            label: '名单口径',
            prop: 'specialListDesc',
            overHidden: true,
            minWidth: 150
          }, {
            label: '创建员工',
            prop: 'staffName',
            overHidden: true,
            minWidth: 50
          }, {
            label: '创建时间',
            prop: 'createDate',
            type: 'date',
            format: 'yyyy-MM-dd HH:mm:ss',
            overHidden: true,
            minWidth: 50
          }, {
            label: '操作',
            prop: 'option',
            slot: true,
            overHidden: true,
            minWidth: 100
          }],
        saveBtn: false,
        updateBtn: false,
        cancelBtn: false,
        addBtn: false,
        delBtn: false,
        editBtn: false
      },
      options: [],
      dialogOptions: [],
      params: {},
      page: {
        total: 0,
        limit: 10,
        pageSize: 10,
        pagerCount: 5
      },
      pageInit: {
        total: 0,
        limit: 10,
        pageSize: 10,
        pagerCount: 5
      },
      tagData: [],
      reqParams: {}

    }
  },
  watch: {
    // 监听语言变化，实时切换表头语言

    '$i18n.locale': {
      handler() {
        this.U.changeTableLanguage(this, this.option.column, 'rosterList.listTable.')
        this.U.changeSearchLanguage(this, this.searchForm, '', 'condition')
        this.U.changeSearchLanguage(this, this.searchHandle, '', 'condition')
        this.U.changeSearchLanguage(this, this.searchHandle, '', 'placeholder')
        this.U.changeSearchLanguage(this, this.searchHandle, '', 'btn')
        this.U.changeSearchLanguage(this, this.searchForm, '', 'placeholder')
      },
      immediate: true
    }
  },
  created() {

  },
  methods: {
    initData() {
      this.getLabelData()
      this.getSearchObject()
      // this.getLabelTree();
    },
    getSearchObject() {
      this.R.forTaglib.getDict('MKT_SPECIAL_LIST_STATUS_CD').then((res) => {
        this.rosterStatusCds = res
        this.statusCd = res
        this.U.setSearchForm(this.searchForm, 'statusCd', this.statusCd)
      })
    },
    editStatus(specialListId, status) {
      var confLog = ''
      if (status == 1000) {
        confLog = this.$t('rosterList.tip.enAble')
      } else if (status == 1200) {
        confLog = this.$t('rosterList.tip.shutDown')
      }
      this.$confirm(confLog, this.$t('tip'), {
        confirmButtonText: this.$t('submitText'),
        cancelButtonText: this.$t('cancelText'),
        type: 'warning'
      }).then(() => {
        const that = this
        that.loading = true
        this.reqParams.specialListId = specialListId
        this.reqParams.statusCd = status
        this.R.forTaglib.postJson('/mktSpecialList/update', this.reqParams).then(res => {
          if (res.ok) {
            this.$message.success(this.$t('operateSuccess'))
            this.getLabelData()
          }
        }).catch(err => {
          that.$message.error(err.toString())
        })
        that.loading = false
      })
    },
    showListByImport(specialListId, specialListName) {
      this.specialListId = specialListId
      this.specialListName = specialListName
      this.showDetailListByNumberModel = true
    },
    handleAdd() {
      this.modelType = 'add'
      this.showDetailListModel = true
      // this.$router.push("/roster");
    },
    // 搜索
    onSearch() {
      debugger
      console.log('列表事件onSearch')
      this.params = this.searchData
      this.page = this.pageInit
      this.page.currentPage = 1
      this.page.offset = 1
      this.getLabelData()
    },
    onReset() {
      console.log('重置事件onSearch')
      this.searchData.specialListName = ''
      this.searchData.statusCd = ''
      this.page.currentPage = 1
      this.page.offset = 1
      this.getLabelData()
    },
    getLabelData() {
      const that = this
      that.loading = true
      this.page.limit = this.page.pageSize
      this.page.offset = this.page.currentPage
      const reqParam = this.R.extend(this.params, this.page)
      this.R.forTaglib.postJson('/mktSpecialList/queryList', reqParam).then(res => {
        that.page.total = res.rowCount
        this.page.currentPage = res.offset
        that.optionData = res.dataList
        that.loading = false
      }).catch(err => {
        that.$message.error(err.toString())
      })
    },
    getLabelTree() {
      const that = this
      that.loading = true
      this.R.forTaglib.get('/labelLevel/queryList').then(res => {
        this.labelTree = []
        var laberList = res
        // tree
        for (var i = 0; i < laberList.length; i++) {
          if (laberList[i].upLabelLevelId == null) {
            laberList[i].children = this.getChildren(laberList, laberList[i].labelLevelId)
            this.labelTree.push(laberList[i])
            break
          }
        }
        // 弹框options
        this.dialogOptions = []
        for (var i = 0; i < this.labelTree.length; i++) {
          if (this.labelTree[i].upLabelLevelId == null) {
            this.labelTree[i].labelLevelPathNameDialog = this.labelTree[i].labelLevelName
            this.dialogOptions.push(this.labelTree[i])
            this.getDialogOptions(this.labelTree[i].children, this.labelTree[i])
            break
          }
        }
        that.loading = false
      }).catch(err => {
        that.$message.error(err.toString())
      })
    },
    getChildren(laberList, labelLevelId) {
      var children = []
      for (var i = 0; i < laberList.length; i++) {
        if (laberList[i].upLabelLevelId != null && laberList[i].upLabelLevelId == labelLevelId) {
          laberList[i].children = this.getChildren(laberList, laberList[i].labelLevelId)
          children.push(laberList[i])
        }
      }
      return children
    },
    getDialogOptions(labelTree, label) {
      for (var i = 0; i < labelTree.length; i++) {
        labelTree[i].labelLevelPathNameDialog = label.labelLevelPathNameDialog + '-->' + labelTree[i].labelLevelName
        this.dialogOptions.push(labelTree[i])
        this.getDialogOptions(labelTree[i].children, labelTree[i])
      }
    },
    refreshChange() {
      this.getLabelData()
    },
    onDetailSuccess(isSuccess) {
      if (isSuccess) {
        this.getLabelData()
        this.showDetailModel = false
      }
    },
    onAddSuccess(isSuccess) {
      if (isSuccess) {
        this.getLabelData()
        this.showDetailListModel = false
      }
    },
    onNumberSuccess(isSuccess) {
      if (isSuccess) {
        this.getLabelData()
        this.showDetailListByNumberModel = false
      }
    }

  }
}
</script>

<style>

</style>

